import React from "react";
import PropTypes from 'prop-types'
import './index.scss'


export default function CheckBox(props) {
    return (
        <label style={ props.style } className={ 'check-box-warp ' + props.className }>
            <input type='checkbox' checked={ props.checked } onChange={ ({ target }) => { props.onChange(target.checked) } } />
            <div className='container'>
                <span className='icon icon-checked' />
                <span className='square' style={{opacity: (props.active && !props.checked) ? '1' : '0'}} />
            </div>
            <span style={ { marginLeft: '5px' } }>{ props.label }</span>
        </label>
    )
}

CheckBox.propTypes = {
    style: PropTypes.object,
    className: PropTypes.string,
    onChange: PropTypes.func,
    checked: PropTypes.bool,
    active: PropTypes.bool,
    label: PropTypes.string
}

CheckBox.defaultProps = {
    style: {},
    className: '',
    onChange: () => {},
    checked: false,
    active: false,
    label: ''
}